<template>
  <el-row>
    <el-col :span="8">
      <el-select :model-value="props.symbol" class-name="m-2" style="margin-bottom: 22px" @change="symbolOnChange">
        <el-option v-for="(v, k) in SqlKeyword" :key="k" :label="v" :value="k" />
      </el-select>
    </el-col>
    <el-col :span="16">
      <el-select
        :model-value="props.value"
        class-name="m-2"
        filterable
        allow-create
        clearable
        :multiple="props.symbol == SymbolEnum.IN || props.symbol == SymbolEnum.NOT_IN"
        :disabled="props.symbol == SymbolEnum.IS_NULL || props.symbol == SymbolEnum.IS_NOT_NULL"
        placeholder="请选择"
        @change="valueOnChange"
        style="margin-bottom: 22px"
      >
        <el-option v-for="item in columnOptions" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </el-col>
  </el-row>
</template>

<script setup lang="ts" name="SelectSearchFormItem">
import { ColumnProps } from "@/components/ProTable/interface";
import { isArray } from "@/utils/is";
import { SqlKeyword, SymbolEnum } from "@/utils/dict";
import { useDimensionOptions } from "@/hooks/useDimensionOptions";
import { API } from "@/api/modules/dwh/typings";

interface SearchFormItem {
  column: ColumnProps<API.TableColumnVo>;
  symbol: SymbolEnum;
  value: any;
}

const props = defineProps<SearchFormItem>();

const { columnOptions } = useDimensionOptions(props.column.srcColumn.columnOptions);

const emit = defineEmits<{
  "update:value": [value: string | Array<string>];
  "update:symbol": [value: string];
}>();
const symbolOnChange = (symbol: string) => {
  emit("update:symbol", symbol);
  if (symbol == "IN" || symbol == "NOT_IN") {
    if (props.value) {
      if (!isArray(props.value)) {
        emit("update:value", [props.value]);
      }
    } else {
      emit("update:value", []);
    }
  } else if (symbol == "IS_NULL" || symbol == "IS_NOT_NULL") {
    emit("update:value", "");
  } else {
    if (isArray(props.value)) {
      emit("update:value", props.value[0]);
    }
  }
};
const valueOnChange = (value: string) => {
  emit("update:value", value);
};
</script>
